<template>
  <div class="home-page">
    <!-- 推荐轮播图 -->
    <RecommendationCarousel @play="handlePlayRecommendation" />

    <!-- 推荐歌单 - 不再传递 playlists 属性 -->
    <RecommendedPlaylists
      name="推荐歌单"
      more-text="更多"
      @item-click="handlePlaylistClick"
      @more-click="handleMorePlaylists"
    />

    <!-- 最新音乐 -->
    <NewSongs
      name="最新音乐"
      @item-click="goToSongDetail"
      @play="playSong"
      @add="addToPlaylist"
    />
  </div>
</template>

<script>
import NewSongs from "@/components/NewSongs.vue";
import PlayerBar from "@/components/PlayerBar.vue";
import RecommendationCarousel from "@/components/RecommendationCarousel.vue";
import RecommendedPlaylists from "@/components/RecommendedPlaylists.vue";

export default {
  components: {
    PlayerBar,
    RecommendationCarousel,
    NewSongs,
    RecommendedPlaylists,
  },
  data() {
    return {
      songs: [],
      // 移除了 playlists 数据属性
    };
  },
  methods: {
    // 格式化毫秒为分:秒格式
    formatDuration(durationMs) {
      const minutes = Math.floor(durationMs / 60000);
      const seconds = Math.floor((durationMs % 60000) / 1000);
      return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
    },

    goToSongDetail(song) {
      // 跳转到歌曲详情页，传递 songId，保持与API/数据库一致
      if (song && song.songId) {
        this.$router.push({ name: "SongDetail", params: { id: song.songId } });
      } else {
        console.warn("无效的歌曲数据，无法跳转", song);
      }
    },
    handlePlayRecommendation(item) {
      console.log("播放推荐:", item.title);
    },
    playSong(song) {
      console.log("播放歌曲:", song.name);
    },
    addToPlaylist(song) {
      console.log("添加到播放列表:", song.name);
    },
    handlePlaylistClick(playlist) {
      console.log("点击歌单:", playlist.title);
    },
    handleMorePlaylists() {
      console.log("查看更多歌单");
    },
  },
};
</script>

<style scoped>
.home-page {
  padding: 20px;
  padding-bottom: 80px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.player-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: white;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .home-page {
    padding-bottom: 70px;
  }
}
</style>
